<template>
	<view class="component col-3e">
        <view class="titleWrap">
            <view class="title font15 fontBold">认购信息</view>
        </view>
        <view class="details top-15">
            <view class="colWrap flex col-fff text-center">
                <view class="colItem font12">
                    <view>房源套数</view>
                    <view class="font14 fontBold top-10">{{ detail.house_count || '--' }}</view>
                </view>
                <view class="colItem font12">
                    <view>入围比</view>
                    <view class="font14 fontBold top-10">{{ detail.ruwei_ratio || '--' }}</view>
                </view>
                <view class="colItem font12">
                    <view>社保系数</view>
                    <view class="font14 fontBold top-10">{{ detail.bao_ratio ? detail.bao_ratio + '分/月' : '--' }}</view>
                </view>
            </view>

            <view class="rowWrap font12">
                <view class="rowItem bg-fff">
                    <text class="title col-grey right-10">认购条件:</text>
                    <text class="value">{{ detail.money || '--' }}</text>
                </view>
                <view class="rowItem bg-fff top-10">
                    <text class="title col-grey right-10">入围分:</text>
                    <text class="value col-error">{{ detail.points_state || '--' }}</text>
                </view>
            </view>
        </view>
	</view>
</template>

<script>
    import { mapState } from 'pinia';
    import { useConfigStore } from '@/store/index';
	export default {
		data() {
			return {
			}
		},
		props:{
			product: {
                type: Object,
                default: () => ({})
            },
            detail: {
                type: Object,
                default: () => ({})
            }
		},
        computed:{
        	...mapState(useConfigStore, ['puid'])
        },
		methods:{
		}
	}
</script>

<style scoped lang="scss">
	.component{
        line-height: 1;
        margin: 50rpx 22rpx 0 22rpx;
        .details{
            border-radius: 20rpx;
            background-image: linear-gradient( to bottom right, #D1D21A, #008D90);
            .colWrap{
                padding: 30rpx 0;
                justify-content: space-between;
                .colItem{
                    width: 33.33%;
                }
            }
            .rowWrap{
                padding: 20rpx;
                border-radius: 20rpx;
                background-image: linear-gradient( to bottom right, #DDE37E, #6BBDBF);
                .rowItem{
                    border-radius: 10rpx;
                    padding: 10rpx;
                    line-height: 1.5;
                    .title,.value{
                        vertical-align: text-top;
                    }
                }
            }
        }
	}
</style>